<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>博客管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
<script th:src="@{/layui/layui.js}"></script>
<script  type="text/javascript" id="blogType">  
     {{#  if( d.blogType != null){   }}  
            {{ d.blogType.typeName }}  
     {{#  }  }}  
</script>
<style type="text/css">
.demoTable {
	margin-left: 15px;
}
</style>
</head>
<body>
	<!-- 上方搜索栏 -->
	<div class="demoTable" style="margin-top: 15px;">
		标题：
		<div class="layui-inline">
			<input class="layui-input" name="id" id="demoReload"
				autocomplete="off">
		</div>
		<button class="layui-btn" style="margin-top: 0px;margin-left: 2px;"
			data-type="reload">
			<i class="layui-icon">&#xe615;</i>搜索
		</button>
		<div class="layui-btn-group tableId">
			<!-- 获取表格选中的数据 -->
			<button class="layui-btn layui-btn-danger" data-type="delAll">
				<i class="layui-icon">&#xe640;</i>删除
			</button>
		</div>
	</div>
	<table class="layui-hide" id="LAY_table_user" lay-filter="demo"></table>
	<script type="text/html" id="barDemo">
 	  	<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">浏览博客</a>
  		<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
   		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>


	<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
	<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
	<script th:inline="javascript" type="text/javascript">
		layui.use('table',
function() {
    var table = layui.table;
    //方法级渲染
    table.render({
        limits: [5, 10, 30, 50, 100],
        limit: 10 //默认采用60
     	 ,
        elem: '#LAY_table_user' //指定原始表格元素选择器（推荐id选择器）
        ,
        url: '/admin/blog/listBlog',
        cols: [([[)]{
            checkbox: true,
            fixed: true
        },
        {
            field: 'id',
            title: 'ID',
            fixed: true,
            align: 'center',
            width:'5%'
        },
        {
            field: 'title',
            title: '标题',
           	fixed: true,
          	width:'20%'
        },
        {
            field: 'releaseDate',
            title: '发表时间',
            sort: true,
            align: 'center',
            fixed: true,
            width:'10%'
            
        },
        {
            field: 'blogType',
            title: '类型',
            templet: '#blogType',
            id: 'blogType',
            align: 'center',
            width:'10%',
            fixed: true,
        },
        {
            field: 'clickHit',
            title: '浏览量',
            sort: true,
            id: 'clickHit',
            align: 'center',
            fixed: true,
            width:'10%'
            
        },
       /*  {
            field: 'replyHit',
            title: '评论量',
            sort: true,
            id: 'replyHit',
            align: 'center',
            fixed: true,
            width:'10%'
            
            
        }, */
         {
            field: 'keyWord',
            title: '关键字',
            id: 'keyWord',
            align: 'center',
           	width:'20%'
            
        },
        {
            field: 'right',
            title: '操作',
            align: 'center',
            toolbar: '#barDemo',
            align: 'center',
             width:'20%'
        }[(]])],
        id: 'tableId',
        page: true,
        height: 'auto',
    });

    //监听表格复选框选择
    table.on('checkbox(demo)',
    function(obj) {
        console.log(obj);
    });
    //监听工具条
    table.on('tool(demo)',
    function(obj) {
        var data = obj.data;
        //查看是跳转到前台的暂时不写
        if (obj.event === 'detail') {
            window.open('../blog/articles/'+data.id,'_black');
        } else if (obj.event === 'del') {
            layer.confirm('确认删除ID:' + data.id + '这条博客吗？',
            function(index) {
                obj.del();
                layer.close(index);
                //关闭的时候发送ajax请求
                $.ajax({
                    url: "../admin/blog/delete",
                    data: {
                        'ids': data.id
                    },
                    type: "post",
                    dataType: 'json',
                    success: function(result) {
                      if(typeof result === 'string') {
					       result = JSON.parse(result)
					    }
                        if (result.success) {
                            //location.reload();
                            //表格重载
                            layer.msg("删除成功！");
                            table.reload('tableId');
                        } else {
                            layer.msg("删除失败！");
                        }
                    }
                });
            });
            //修改博客
        } else if (obj.event === 'edit') {
            //点击编辑打开一个修改页面
            /* layer.alert('编辑行：<br>'
											+ JSON.stringify(data)) */
            var id = data.id
            //将博客id传给modifyBlog.html
            window.location.href = '/views/modifyBlog?id='+id;
        }
    });
    var $ = layui.$,
    active = {
        /* 搜索框 */
        reload: function() {
            var demoReload = $('#demoReload');
            table.reload('tableId', {
                where: {
                    title: demoReload.val()
                }
            });
        },
  		/**
  		*定义函数绑定到按钮的data-type上 delAll
    	*/
        delAll: function() {

            var checkStatus = table.checkStatus('tableId');
            var checkNums = checkStatus.data.length
            if (checkNums == 0) {
                layer.alert('请选择需要删除的博客！', {
                    title: '系统提示',
                    icon: 2,
                    anim: 6,
                });
                return false;
            }
            var ids = '';
            data = checkStatus.data; //数据
            //循环把所有要删除的ID整成12,13,545
            for (var i = 0; i < checkNums; i++) {
                ids += data[i].id + ",";
            }
            ids = ids.substring(0, ids.length - 1); //组装好1，2，3
            layer.confirm('确认删除该' + checkNums + '条博客吗？',
            function(index) {
                //obj.del();
                layer.close(index);
                //关闭的时候发送ajax请求
                $.ajax({
                    url: "../admin/blog/delete",
                    data: {
                        'ids': ids
                    },
                    type: "post",
                    dataType: 'json',
                    success: function(data) {
                    	if(typeof data === 'string') {
					       data = JSON.parse(data)
					    }
                        if (data.success) {
                            //location.reload();
                            //表格重载
                            layer.msg("删除成功！");
                            table.reload('tableId');
                        } else {
                            layer.msg("删除失败！");
                        }
                    },
                    //success end
                }); //ajax end
            }); //confirm end
        } //delAll end
    };
    $('.demoTable .layui-btn').on('click',
    function() {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

});
	</script>

</body>
</html>